<template>
  <div>
    <QueryTable
      :queryConfig="queryConfig"
      :tableData="tableData"
      :tableColumns="tableColumns"
      :tableConfig="tableConfig"
      :pagination="pagination"
      @search="search"
      @paginationChange="loadData"
    >
      <template #operate="{ scoped, row }">
        <!-- disabled -->
        <el-button type="primary" link @click="handleRefund(scoped, row)"
          >退款</el-button
        >
      </template>
    </QueryTable>
  </div>
</template>

<script setup lang="ts" name="finance-userOrders">
import { onMounted, reactive, ref } from "vue";
import type { IQueryFrom, ITableColumn } from "@/types/queryTable";
import { ElMessage, ElMessageBox } from "element-plus";
import { parseTime } from "@/utils/index";
// import { apiFn } from "@/api/user";

interface IParams {
  pageNum: number;
  pageSize: number;
}
// 退款
const handleRefund = async (scoped: any, row: { orderBillNo: string }) => {
  try {
    await ElMessageBox.confirm(
      `当前退款业务订单号${row.orderBillNo},是否确认退款?`,
      "退款提示",
      {
        confirmButtonText: "确认退款",
        cancelButtonText: "取消退款",
        type: "warning",
      }
    );
  } catch (error) {
    console.log(error);
  }
};

// 表格搜索
const queryConfig = reactive<IQueryFrom[]>([
  {
    label: "账号",
    prop: "accountId",
    queryType: "input",
  },
  {
    label: "业务系统订单号",
    prop: "orderBillNo",
    queryType: "input",
    labelWidth: 120,
  },
  {
    label: "支付订单号",
    prop: "orderId",
    queryType: "input",
    labelWidth: 90,
  },
  {
    label: "支付方式",
    prop: "payWay",
    queryType: "select",
    options: [
      {
        label: "支付宝",
        value: "1",
      },
      {
        label: "微信",
        value: "2",
      },
    ],
  },
  {
    label: "退款状态",
    prop: "refundStatus",
    queryType: "select",
    options: [
      {
        label: "未退款",
        value: "0",
      },
      {
        label: "已退款",
        value: "1",
      },
    ],
  },
]);
const pagination = reactive({
  total: 0,
  page: 1,
  size: 10,
});
const tableConfig = reactive({
  loading: false,
});
const tableColumns = reactive<ITableColumn[]>([
  {
    prop: "accountId",
    label: "用户ID",
  },
  {
    prop: "commodityId",
    label: "商品ID",
  },
  {
    prop: "orderId",
    label: "订单ID",
  },
  {
    prop: "orderBillNo",
    label: "业务订单号",
  },
  {
    prop: "payPeople",
    label: "支付人",
  },
  {
    prop: "payWay",
    label: "支付方式",
    formatter(row) {
      return row.payWay == "1" ? "支付宝" : "微信";
    },
  },
  {
    prop: "payPrice",
    label: "支付价格",
  },
  {
    prop: "payStatus",
    label: "支付状态",
    formatter(row) {
      return row.payStatus == "0"
        ? "待支付"
        : row.payStatus == "1"
        ? "已支付"
        : "已退款";
    },
  },
  {
    prop: "expireStatus",
    label: "有效状态",
    formatter(row) {
      return row.expireStatus == "0"
        ? "待生效"
        : row.expireStatus == "1"
        ? "生效中"
        : row.expireStatus == "2"
        ? "已过期"
        : "已退款";
    },
  },
  {
    prop: "remainFee",
    label: "退款金额",
  },
  {
    prop: "refundStatus",
    label: "退款状态",
    formatter(row) {
      return row.refundStatus == "0" ? "未退款" : "已退款";
    },
  },
  {
    prop: "commodityName",
    label: "商品名称",
  },
  {
    prop: "commodityType",
    label: "商品类型",
    formatter(row) {
      return row.commodityType == "1"
        ? "月卡"
        : row.commodityType == "2"
        ? "季卡"
        : "年卡";
    },
  },
  {
    prop: "orderParam",
    label: "返回订单凭证",
  },
  {
    prop: "orderDesc",
    label: "返回订单描述",
  },
  {
    prop: "timeStamp",
    label: "下单时间",
    formatter(row) {
      return parseTime(row.timeStamp);
    },
  },
  {
    prop: "operate",
    label: "操作",
    slot: "operate",
  },
]);
const tableData = ref([]);
let queryFrom: { [propName: string]: any } = {};
const loadData = async () => {
  tableConfig.loading = true;
  const params = {
    ...queryFrom,
    pageNum: pagination.page,
    pageSize: pagination.size,
  };
  try {
    // const res = await apiFn<IParams, any>(params);
    // tableData.value = res.data;
    // pagination.total = res.total;
  } catch (error) {
    console.log(error);
  } finally {
    tableConfig.loading = false;
  }
};
const search = (query: { [propName: string]: any }, isReset: boolean) => {
  queryFrom = {};
  for (const key in query) {
    if (Object.prototype.hasOwnProperty.call(query, key) && query[key]) {
      queryFrom[key] = query[key];
    }
  }
  pagination.page = 1;
  loadData();
};

onMounted(() => {
  loadData();
});
</script>
<route lang="yaml">
meta:
  parent: "商品中心"
  title: "商品列表"
  index: 0
</route>
